<menu id="sidenav">
  <div class="dropdown-btn">
    <a href="#">Navigate the Docs</a>
  </div>

  <div class="nav-container">
    <nav>
      <ul>
        {% if page.url == '/' %}
          <li class="is-selected"><a href="{{ site.baseurl }}/" class="active">Introduction</a></li>
        {% else %}
          <li><a href="{{ site.baseurl }}/">Introduction</a></li>
        {% endif %}
      </ul>
      <ul>
        <li class="text-label">Getting Started</li>
        {% assign gs_items = site.getting_started | sort: 'order' %}
        {% for item in gs_items %}
          {% if page.url == item.url %}
            <li class="is-selected"><a href="{{ site.baseurl }}{{ item.url }}" class="active">{{item.title}}</a></li>
          {% else %}
            <li><a href="{{ site.baseurl }}{{ item.url }}">{{item.title}}</a></li>
          {% endif %}
        {% endfor %}
      </ul>
      <ul>
        <li class="text-label">Screen By Screen</li>
        {% assign sbs_items = site.screen_by_screen | sort: 'order' %}
        {% for item in sbs_items %}
          {% if page.url == item.url %}
            <li class="is-selected"><a href="{{ site.baseurl }}{{ item.url }}" class="active">{{item.title}}</a></li>
          {% else %}
            <li><a href="{{ site.baseurl }}{{ item.url }}">{{item.title}}</a></li>
          {% endif %}
        {% endfor %}
      </ul>
      <ul>
        <li class="text-label">Concepts</li>
        {% assign c_items = site.concepts | sort: 'order' %}
        {% for item in c_items %}
          {% if page.url == item.url %}
            <li class="is-selected"><a href="{{ site.baseurl }}{{ item.url }}" class="active">{{item.title}}</a></li>
          {% else %}
            <li><a href="{{ site.baseurl }}{{ item.url }}">{{item.title}}</a></li>
          {% endif %}
        {% endfor %}
      </ul>
      
  </nav>
</menu>
